<template>
  <div class="app-container">
    <page-header
      title="积分记录"
      desc="商城交易积分支付记录信息列表"
    />
    <gridview
      ref="gridView"
      :api-service="apiService"
      :bind-params="params"
      :grid-config="gridOptions"
      :is-async="true"
      @action="onAction"
    />
  </div>
</template>
<script>
import PageHeader from '@/components/PageHeader'
import Gridview from '@/components/Gridview'
import GridApiService from '@/api/grid'
import { CUSTOM_CONFIG } from './config'
export default {
  components: {
    PageHeader,
    Gridview
  },
  data() {
    return {
      listQuery: {},
      filterConfig: [],
      configData: CUSTOM_CONFIG,
      config: {}
    }
  },
  computed: {
    userId() {
      if (this.$route.query.uid) {
        return this.$route.query.uid
      }
      return ''
    },
    apiService() {
      return new GridApiService('/user/credit', {
        user_id: this.userId
      })
    },
    params() {
      return Object.assign(
        {
          filterStatus: ''
        },
        this.listQuery
      )
    },
    gridOptions() {
      if (this.config && this.config.gridConfig) {
        var renderOptions = this.configData
        return this.config.gridConfig.map(item => {
          if (item.callback) {
            const _options = renderOptions[item.prop] || item
            return { ..._options, ...item }
          }
          return item
        })
      }
      return []
    }
  },
  created() {
    this.loadGridModel()
  },
  methods: {
    loadGridModel() {
      this.apiService.config().then(response => {
        const { data } = response
        this.config = data.config
      })
    },
    onBatchSubmit(files) {
      const file = [...files].pop()
      this.apiService.handleAction('upload', null, { path: file.path }).then(res => {
        console.log('change', res)
        this.sheet = res.data
        this.onRefresh()
      })
    },
    onRefresh() {
      this.listQuery = {}
    },
    onAction(name, row) {}
  }
}
</script>
